<template>
  <nav class="navigation-bar neo-brutalist">
    <div class="nav-container">
      <div class="nav-logo" @click="goToHome">
        <span class="emoji">📝</span>
        <span class="logo-text">虚拟Emoji角色系统</span>
      </div>
      
      <ul class="nav-menu" :class="{ active: isMenuOpen }">
        <li v-for="item in navItems" :key="item.path" class="nav-item">
          <router-link 
            :to="item.path" 
            class="nav-link"
            :class="{ active: $route.path === item.path }"
            @click="closeMenu"
          >
            {{ item.name }}
          </router-link>
        </li>
      </ul>
      
      <div class="nav-auth" v-if="isAuthenticated !== null">
        <span v-if="isAuthenticated" class="user-info">
          欢迎, {{ user?.username }}!
          <button class="logout-btn neo-brutalist btn btn--danger" @click="logout">
            登出
          </button>
        </span>
        <div v-else class="auth-buttons">
          <router-link to="/login" class="nav-link neo-brutalist btn btn--secondary" @click="closeMenu">
            登录
          </router-link>
          <router-link to="/register" class="nav-link neo-brutalist btn btn--primary" @click="closeMenu">
            注册
          </router-link>
        </div>
      </div>
      
      <div class="hamburger" @click="toggleMenu" :class="{ active: isMenuOpen }">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </div>
    </div>
  </nav>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { authApi, type User } from '../services/api'

const router = useRouter()
const isMenuOpen = ref(false)
const isAuthenticated = ref<boolean | null>(null)
const user = ref<User | null>(null)

const navItems = [
  { name: '主页', path: '/home' },
  { name: '创建角色', path: '/character-create' },
  { name: '聊天', path: '/chat' },
  { name: '日记', path: '/diary' },
  { name: '虚拟世界', path: '/world' }
]

const toggleMenu = () => {
  isMenuOpen.value = !isMenuOpen.value
}

const closeMenu = () => {
  isMenuOpen.value = false
}

const goToHome = () => {
  router.push('/home')
  closeMenu()
}

const checkAuthStatus = async () => {
  try {
    user.value = await authApi.getProfile()
    isAuthenticated.value = true
  } catch (error) {
    isAuthenticated.value = false
    user.value = null
  }
}

const logout = async () => {
  try {
    await authApi.logout()
    isAuthenticated.value = false
    user.value = null
    window.showNotification('登出成功！', 'success')
    router.push('/login')
  } catch (error) {
    window.showNotification('登出失败，请重试', 'error')
  }
}

const handleClickOutside = (event: MouseEvent) => {
  const nav = document.querySelector('.navigation-bar')
  if (nav && !nav.contains(event.target as Node)) {
    closeMenu()
  }
}

onMounted(() => {
  checkAuthStatus()
  document.addEventListener('click', handleClickOutside)
})

onBeforeUnmount(() => {
  document.removeEventListener('click', handleClickOutside)
})
</script>

<style scoped>
.navigation-bar {
  background-color: var(--neo-brutalist-white);
  border-bottom: 4px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0.5rem 0;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
}

.nav-logo {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: bold;
  font-size: 1.2rem;
}

.nav-logo .emoji {
  margin-right: 0.5rem;
  font-size: 1.5rem;
}

.nav-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 1rem;
}

.nav-item {
  margin: 0;
}

.nav-link {
  text-decoration: none;
  color: var(--neo-brutalist-black);
  padding: 10px 15px;
  border-radius: 0;
  transition: all 0.3s ease;
  font-weight: 500;
  position: relative;
  display: block;
}

/* 夜间模式下的导航链接文字颜色 */
[data-theme="dark"] .nav-link {
  color: var(--neo-brutalist-white);
}

[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active {
  color: var(--neo-brutalist-yellow);
  background: var(--neo-brutalist-black);
}

.nav-link:hover,
.nav-link.active {
  background: var(--neo-brutalist-yellow);
  color: var(--neo-brutalist-black);
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 0 var(--neo-brutalist-black);
}

.nav-auth {
  display: flex;
  align-items: center;
}

.user-info {
  color: var(--neo-brutalist-black);
  font-weight: 500;
}

/* 夜间模式下的用户信息文字颜色 */
[data-theme="dark"] .user-info {
  color: var(--neo-brutalist-white);
}

.logo-text {
  font-weight: bold;
  font-size: 1.2rem;
  color: var(--neo-brutalist-black);
}

/* 夜间模式下的logo文字颜色 */
[data-theme="dark"] .logo-text {
  color: var(--neo-brutalist-white);
}

.logout-btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.9rem;
  border: 2px solid var(--border-color);
}

.auth-buttons {
  display: flex;
  gap: 0.5rem;
}

.auth-buttons .nav-link {
  padding: 0.25rem 0.75rem;
  font-size: 0.9rem;
}

.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.bar {
  width: 25px;
  height: 3px;
  background-color: #333;
  margin: 3px 0;
  transition: 0.3s;
}

.hamburger.active .bar:nth-child(1) {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.hamburger.active .bar:nth-child(2) {
  opacity: 0;
}

.hamburger.active .bar:nth-child(3) {
  transform: rotate(45deg) translate(-5px, -6px);
}

@media (max-width: 768px) {
  .hamburger {
    display: flex;
  }
  
  .nav-menu {
    position: fixed;
    left: -100%;
    top: 70px;
    flex-direction: column;
    background-color: var(--neo-brutalist-white);
    width: 100%;
    text-align: center;
    transition: 0.3s;
    box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
    padding: 2rem 0;
    border: 4px solid var(--border-color);
  }
  
  .nav-menu.active {
    left: 0;
  }
  
  .nav-item {
    margin: 1rem 0;
  }
  
  .nav-auth {
    margin-top: 1rem;
    justify-content: center;
  }
  
  .user-info {
    flex-direction: column;
    gap: 0.5rem;
  }
}
</style>
